<template>
    <div class="app-container">
        <!--工具栏-->
        <div class="head-container">
            <div v-if="crud.props.searchToggle">

                <div class="head-container">
                    <el-input v-model="query.goodsName" style="width: 200px;" class="filter-item" placeholder="文创名称"
                        size="normal" clearable />

                    <rrOperation />
                </div>
            </div>
            <!-- <crudOperation :permission="permission" /> -->
        </div>
        <!--表单组件-->
        <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU"
            :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="600px">
            <el-form ref="form" :model="form" :inline="false" :rules="rules" size="small" label-width="120px">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="form.title" />
                </el-form-item>
                <el-form-item label="类型" prop="sort">
                    <!-- 类型 0.话术 1.指导建议 -->
                    <el-select v-model="form.type" placeholder="请选择" style="width: 100%;">
                        <el-option v-for="item in dict.talking_tactics_type" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model.number="form.sort" />
                </el-form-item>
                <el-form-item label="建议图" prop="imagePath">
                    <el-upload v-loading="imagePath_loading" class="avatar-uploader el-upload"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :http-request="(params) => uploadRequest(params, 'imagePath')" :show-file-list="false">
                        <img v-if="form.imagePath" :src="form.imagePath" class="avatar">
                        <div v-else class="upload-text">选择图片</div>
                        <div class="btn" v-if="form.imagePath">
                            <el-button size="36" type="text" icon="el-icon-delete"
                                @click.stop="deleteImg('imagePath')"></el-button>
                        </div>
                    </el-upload>
                    <el-input v-show="false" v-model="form.imagePath" />
                </el-form-item>
                <el-form-item label="内容" style="width: 100%;">
                    <el-input v-model="form.content" type="textarea" :rows="4" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="text" @click="crud.cancelCU">取消</el-button>
                <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
            </div>
        </el-dialog>
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%"
            @selection-change="crud.selectionChangeHandler">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="headPic" label="头像" >
                <template slot-scope="scope">
                    <el-image style="width: 50px; height: 50px" :src="scope.row.headPic" fit="cover"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="用户名称" />
            <el-table-column prop="nickName" label="用户昵称" />
            <el-table-column prop="userRole" label="用户类型" >
                <template slot-scope="scope">
                    <span>{{scope.row.userRole | dict('user_role')}}</span>
                </template>
            </el-table-column>
            
            <el-table-column prop="userSn" label="用户编号" />
            <el-table-column prop="vipRank" label="用户等级" />
            <el-table-column prop="userMoney" label="用户佣金" />
            <el-table-column prop="sex" label="用户性别" />
            <el-table-column prop="regTime" label="注册时间" />
            <el-table-column prop="lastLogin" label="最后登录时间" />
            <el-table-column prop="lastIp" label="最后登录IP" />
            <el-table-column prop="ifLock" label="是否冻结" />
            <!-- <el-table-column v-if="checkPer(['admin', 'serverDeploy:edit', 'serverDeploy:del'])" label="操作" width="150px"
                align="center">
                <template slot-scope="scope">
                    <udOperation :data="scope.row" :permission="permission" />
                </template>
            </el-table-column> -->
        </el-table>
        <!--分页组件-->
        <!-- <pagination /> -->
    </div>
</template>

<script>

import crudTalkingTactics from '@/api/mini/talkingTactics'
import { uploadFile } from '@/api/data'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
const defaultForm = { title: '', type: '', sort: '', imagePath: '', content: '' }
export default {
    name: 'Mechanism',
    dicts: ['user_role'],
    components: { pagination, crudOperation, rrOperation, udOperation },
    cruds() {
        return CRUD({ title: '机构', url: '/api/script/getInstitutionList', listMethod: 'get', listKey: ['data'], totalKey: ['data', 'total'], crudMethod: { ...crudTalkingTactics }, query: { type: 1 } })
    },
    mixins: [presenter(), header(), form(defaultForm), crud()],

    data() {
        return {
            accountList: [],
            accountMap: {},
            loading: false,
            imagePath_loading: false,
            detailList: [],
            bannerList: [],
            dateRange: [],
            permission: {
                add: ['admin', 'proportion:add'],
                edit: ['admin', 'proportion:edit'],
                del: ['admin', 'proportion:del']
            },
            rules: {
                title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
                content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
            }
        }
    },
    methods: {
        detailImgchange() {
            console.log('this.fileList :>> ', this.fileList)
        },

        uploadRequest(params, key) {
            console.log('params :>> ', params)
            this[`${key}_loading`] = true
            uploadFile(params).then(res => {
                console.log('res :>> ', res)
                this[`${key}_loading`] = false
                this.form[key] = res.data
                this.$set(this.form, key, res.data)
            })
        },
        uploadDetailRequest(params, listKey, key) {
            uploadFile(params).then(res => {
                this[listKey].push({ name: params.file.name, url: res.data })
                this.form[key] = this[listKey].map(item => item.url).join(',')
            })
        },

        deleteImg(key) {
            this.form[key] = ''
        },
        changeStatus(status, row) {
            this.$confirm('确定要修改上架状态吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                crudMatch.changeMatchStatus(row.id).then(res => {
                    this.$message.success('修改成功')
                    this.crud.toQuery()

                })
            }).catch(() => {
                row.status = !status
            })
        },

        // 新增编辑前做的操作
        [CRUD.HOOK.beforeToCU](crud, form) {
            this.bannerList = form.showImage ? form.showImage.split(',').map(url => ({ url })) : []
            this.detailList = form.detailImage ? form.detailImage.split(',').map(url => ({ url })) : []
        },

    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
    text-align: left;
}

.avatar-uploader,
.el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px !important;
    height: 178px;
    display: inline-block;
}

.avatar-uploader:hover,
.el-upload:hover {
    border-color: #409EFF;
}

.upload-text {
    font-size: 14px;
    color: #8c939d;
    line-height: 178px;
    text-align: center;
    margin: 0 auto;
}

.avatar {
    width: 178px;
    height: 178px;
    display: inline-block;
    object-fit: cover;
}

.btn {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    width: 178px !important;
    height: 178px;
    border-radius: 0 6px 0 6px;
    text-align: center;
    line-height: 178px;
}

.avatar-uploader:hover {

    // 鼠标悬浮显示按钮
    .btn {
        display: block;
    }

}
</style>
